<template>
  <div class="table-view">
    <div class="table-cell" v-for='item in list' :key='item.id'>
      <label>
        <input type="radio" class="radio" :value='item.id' v-model='radio'>
        <div class="title">{{ item.title }}</div>
        <div class="type">
          <el-tag
            size="small"
            :type="item.cid == 1 ? '' : item.cid == 2 ? 'danger' : 'warning'">{{ item.cid == 1 ? "类目" : item.cid == 2 ? "特惠" : "快讯" }}</el-tag>
        </div>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: ''
    }
  },
  methods: {
    result() {
      return this.list.find(c => c.id === Number(this.radio))
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style lang="scss">
.table-view {
  .table-cell label {
    padding: 10px 0;
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  }
  .radio {
    flex: 0 0 30px;
  }
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .type {
    flex: 0 0 60px; text-align: center;
  }
}
</style>
